<template>
  <div class="device-view">
    <div class="main">
      <div class="module" id="model01">
        <div class="title">设备信息</div>
        <div class="deviceInfo">
          <div class="left">
            <el-image class="recycle" :src="deviceImg"></el-image>
          </div>
          <div class="right">
            <div>国乾NAS 2020</div>
            <div>
              <span>设备互联网运行正常</span>
              <el-button size="mini">刷新</el-button>
            </div>
            <div>
              <span>查看设备的SN码、IP地址、CPU、硬盘、内存等信息</span>
            </div>
            <el-button type="primary" size="mini" class="btn" @click="openDetail('DeviceInfo')">查看设备信息</el-button>
          </div>
        </div>
      </div>
      <div class="module" id="model02">
        <div class="title">空间管理</div>
        <div class="interspaceManage">
          <div class="info">使用空间：41.12G / 256G</div>
          <div class="progress">
            <div></div>
            <div></div>
          </div>
          <div class="info">
            <span>私人空间：39.99G</span>
            <span>公共空间：39.99G</span>
            <span>未使用空间：39.99G</span>
          </div>
          <table>
            <tr>
              <td style="color: #AFAFB3">用户名称</td>
              <td v-for="(item, index) in tableData" :key="index">{{item.name}}</td>
            </tr>
            <tr>
              <td style="color: #AFAFB3">存储大小</td>
              <td v-for="(item, index) in tableData" :key="index">{{item.storage}}</td>
            </tr>
          </table>
          <div>
            <Collapse @handle="handle01">
              <template slot="text">整理磁盘碎片，增加硬盘可用空间</template>
            </Collapse>
            <Collapse @handle="handle02">
              <template slot="text">存储空间使用寿命检测</template>
            </Collapse>
            <Collapse @handle="handle03">
              <template slot="text">将磁盘内容备份到外部存储</template>
            </Collapse>
            <Collapse @handle="handle04">
              <template slot="text">将磁盘内容备份到外部存储</template>
            </Collapse>
          </div>
        </div>
      </div>
      <div class="module" id="model03">
        <div class="title">权限管理</div>
        <div class="permiseion">
          <div>
            <Collapse :type="2">
              <template slot="text">张三</template>
              <el-select slot="custom" v-model="value1" placeholder="请选择" size="mini" style="width: 80px">
                <el-option v-for="item in optionList1" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </Collapse>
            <Collapse :type="2">
              <template slot="text">张三</template>
              <template slot="custom">管理员</template>
            </Collapse>
            <Collapse :type="3">
              <template slot="text">张三</template>
            </Collapse>
            <Collapse :type="3">
              <template slot="text">张三</template>
              <template slot="content">
                <Collapse :type="2" :border="false">
                  <div slot="text" class="text">账户类别</div>
                  <el-select slot="custom" v-model="value2" placeholder="请选择" size="mini" style="width: 80px">
                    <el-option v-for="item in optionList2" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </Collapse>
              </template>
            </Collapse>
            <Collapse :type="3">
              <template slot="text">张三</template>
              <template slot="content">
                <Collapse :type="2" :border="false">
                  <div slot="text" class="text">账户类别</div>
                  <el-select v-model="value2" placeholder="请选择" slot="custom" size="mini" style="width: 80px">
                    <el-option v-for="item in optionList2" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </Collapse>
                <Collapse :type="2" :border="false">
                  <div slot="text" class="text">公共空间管理</div>
                  <el-select v-model="value3" placeholder="请选择" slot="custom" size="mini" style="width: 80px">
                    <el-option v-for="item in optionList3" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </Collapse>
                <Collapse @handle="handle01" :border="false">
                  <div slot="text" class="text">禁止访问空间目录（0）</div>
                </Collapse>
              </template>
            </Collapse>
          </div>
        </div>
      </div>
      <div class="module" id="model04">
        <div class="title">固件信息</div>
          <Collapse :type="2">
            <template slot="text">固件版本：V 1.0.0.1</template>
            <el-button slot="custom" type="primary" size="mini" class="btn" @click="openDetail('Set')">检查更新</el-button>
          </Collapse>
      </div>
      <div class="module" id="model05">
        <div class="title">远程操作</div>
          <Collapse  @handle="handle05">
            <template slot="text">远程重启</template>
          </Collapse>
          <Collapse  @handle="handle06">
            <template slot="text">远程关机</template>
          </Collapse>
      </div>
      <div class="module" id="model06">
        <div class="title">操作日志</div>
          <Collapse :type="2">
            <template slot="text">查看NAS设备近期增、删、改等操作日志</template>
            <el-button slot="custom" type="primary" size="mini" class="btn" @click="openDetail('LogInfo')">查看日志</el-button>
          </Collapse>
      </div>
      <div class="module" id="model07">
        <div class="title">解绑设备</div>
          <Collapse :type="2">
            <template slot="text">如果您不想在使用此设备，可以进行解绑操作</template>
            <el-button slot="custom" type="primary" size="mini" class="btn">解除绑定</el-button>
          </Collapse>
      </div>
    </div>
    <SideNavigation :activeStatus="activeStatus" :moduleList="moduleList" @selectModel="selectModel" class="sideNavigation" />
    <components :is="url" v-if="ifShow" @closeEvent="closeEvent" />
  </div>
</template>

<script>
import Collapse from '@/views/components/collapse.vue'
import SideNavigation from '@/views/components/sideNavigation.vue'
import LogInfo from './components/logInfo.vue'
import DeviceInfo from './components/deviceInfo.vue'
import Set from './components/set.vue'
export default {
  data() {
    return {
      deviceImg: require('../../assets/images/device.png'),
      tableData: [
        {
          name: '刘一',
          storage: '23.96'
        },
        {
          name: '刘一',
          storage: '23.96'
        },
        {
          name: '刘一',
          storage: '23.96'
        },
        {
          name: '刘一',
          storage: '23.96'
        },
        {
          name: '刘一',
          storage: '23.96'
        },
        {
          name: '刘一',
          storage: '23.96'
        },
        {
          name: '刘一',
          storage: '23.96'
        }
      ],
      optionList1: [
        {
          label: '管理员',
          value: 0
        },
        {
          label: '管理员1',
          value: 1
        },
        {
          label: '管理员2',
          value: 2
        },
      ],
      optionList2: [
        {
          label: '普通成员',
          value: 0
        },
        {
          label: 'VIP',
          value: 1
        }
      ],
      optionList3: [
        {
          label: '读写',
          value: 0
        },
        {
          label: '只读',
          value: 1
        }
      ],
      value1: 0,
      value2: 0,
      value3: 0,
      moduleList: [
        {
          title: '设备信息',
          id: 'model01'
        },
        {
          title: '空间管理',
          id: 'model02'
        },
        {
          title: '权限管理',
          id: 'model03'
        },
        {
          title: '固件信息',
          id: 'model04'
        },
        {
          title: '远程操作',
          id: 'model05'
        },
        {
          title: '操作日志',
          id: 'model06'
        },
        {
          title: '解绑设备',
          id: 'model07'
        },
      ],
      activeStatus: 'model01',
      statusFlag: true,
      url: '',
      ifShow: false
    }
  },
  components: {
    Collapse,
    SideNavigation,
    LogInfo,
    DeviceInfo,
    Set
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handle01() {
      console.log(1)
    },
    handle02() {},
    handle03() {},
    handle04() {},
    handle05() {},
    handle06() {},
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (this.statusFlag) this.getDomOffsetTop(scrollTop)
    },
    // 获取各个模块的offsetTop
    getDomOffsetTop(scrollTop) {
      this.moduleList.forEach((v) => {
        v.offsetTop = document.querySelector('#' + v.id).offsetTop
        if (v.offsetTop < scrollTop + 100) this.activeStatus = v.id
      })
    },
    selectModel(value) {
      this.statusFlag = false
      setTimeout(() => {
        this.statusFlag = true
      }, 500)
      this.activeStatus = value
      document.getElementById(value).scrollIntoView({ block: 'center', inline: 'nearest' })
    },
    openDetail(url) {
      this.url = url
      this.ifShow = true
    },
    closeEvent() {
      this.ifShow = false
      this.url = ''
    }
  }
}
</script>

<style lang="less" scoped>
  .device-view{
    position: relative;
    width: 758px;
    padding: 31px 63px 30px 20px;
    .main{
      width: 530px;
      height: 100%;
      .module{
        margin-bottom: 52px;
        .title{
          padding-left: 7px;
          border-left: 2px solid #3561F6;
          font-weight: Bold;
          height: 14px;
          line-height: 14px;
          margin-bottom: 27px;
        }
        .deviceInfo{
          display: flex;
          .left{
            margin-right: 19px;
            .el-image{
              width: 97px;
              height: 89px;
            }
          }
          .right{
            position: relative;
            flex: 1;
            div:nth-of-type(1){
              font-size: 18px;
              margin-bottom: 19px;
            }
            div:nth-of-type(2){
              font-size: 12px;
              color: #7A7F8D;
              margin-bottom: 8px;
              span{
                margin-right: 15px;
              }
              .el-button{
                height: 24px;
              }
            }
            div:nth-of-type(3){
              display: flex;
              justify-content: space-between;
              font-size: 12px;
              color: #7A7F8D;
            }
            .btn{
              position: absolute;
              right: 0;
              bottom: 0;
            }
          }
        }
        .interspaceManage{
          .info:nth-of-type(1), .info:nth-of-type(3){
            font-size: 12px;
            color: #58657A;
            margin-bottom: 15px;
          }
          .info:nth-of-type(3){
            span{
              margin-right: 28px;
              font-size: 10px;
              color: #58657A
            }
            span:nth-of-type(1)::before{
              content: '● ';
              width: 4px;
              height: 4px;
              color: #FC4B4B;
            }
            span:nth-of-type(2)::before{
              content: '● ';
              width: 4px;
              height: 4px;
              color: #3561F6;
            }
            span:nth-of-type(3)::before{
              content: '● ';
              width: 4px;
              height: 4px;
              color: #EBEBEB;
            }
          }
          .progress{
            width: 100%;
            height: 6px;
            border-radius: 2px;
            background-color: #EBEBEB;
            display: flex;
            margin-bottom: 10px;
            div:nth-of-type(1){
              height: 100%;
              background-color: #FC4B4B;
              width: 100px;
            }
            div:nth-of-type(2){
              height: 100%;
              background-color: #3561F6;
              width: 200px;
            }
          }
          table{
            border: 1px solid #E8EBEF;
            border-collapse: collapse;
            border-spacing: 0;
            background-color: transparent;
            display: table;
            width: 100%;
            margin-bottom: 10px;
            td{
              text-align:center;
              vertical-align:middle;
              padding: 0;
              width: 67px;
              height: 35px;
              border: 1px solid #E8EBEF;
              font-size: 10px;
              color: #58657A;
            }
          }
        }
        .permiseion{
          .text{
            font-size: 12px;
            color: #909098;
          }
        }
      }
    }
    .sideNavigation{
      position: fixed;
      left: 630px;
      top: 20px;
    }
  }
</style>